<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Historical Orders</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/js/comment-history.js"></script>
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/stars.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/grade-style.css"
	rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath }/css/index.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/menu-style.css">
</head>
<body>
	<div class="contain">
		<c:import url="header.jsp"></c:import>
		<c:import url="menu.jsp"></c:import>
		<div class="container-fluid">
			<div class="container">
				<h2>My Order--history order</h2>
				<hr>
				<div class="row">
					<!-- <table class="table table-striped table-title">
						<tr>
							<th>Order Time</th>
							<th>Merchant</th>
							<th>Status</th>
							<th>Detail</th>
							<th>Evaluate</th>
						</tr>
					</table> -->
					<ul class="order-msg history-panel">
						<li class="merchant-msg">
							<div class="history-header">
								<div class="history-item">
									<b>Order Time</b> 
								</div>
								<div class="history-item">
									<b>Merchant</b>
								</div>
								<div class="history-item">									
									<b>Status</b>
								</div>
								<div class="history-item">									
									<b>Detail</b>
								</div>
								<div class="history-item">										
									<b>Evaluate</b>
								</div>
							</div>
						</li>
						<c:forEach var="order" items="${historicalOrders}">
							<li class="merchant-msg">
								<div class="history-msg">
									<div class="history-item">
										<span>${order.dt }</span> 
									</div>
									<div class="history-item">
										<span>${order.merchant.mName }</span>
									</div>
									<div class="history-item">									
										<span>${order.receive }</span>
									</div>
									<div class="history-item">									
										<span class="btn-detail fa fa-plus"></span>
									</div>
									<div class="history-item">										
										<span id="${order.oId }">
											<c:if test="${order.evaluate==0 }">
												<button class="btn btn-warning" onclick="onEvaluate(0,'${order.oId}')">评分</button>
											</c:if>
											<c:if test="${order.evaluate==1 }">									
												<button class="btn btn-danger" onclick="onEvaluate(1,'${order.oId}')">投诉</button>
											</c:if>
											<c:if test="${order.evaluate==2 }">									
												<button class="btn btn-warning" onclick="onEvaluate(2,'${order.oId}')">评分</button>
											</c:if>
										</span>
									</div>
								</div>
								<div class="order order-detail">
									<table class="table table-content">
										<c:forEach var="item" items="${order.orderItems }">
											<tr>
												<td class="td-img"><img src="" alt=""
													class="dish-img"></td>
												<td class="td-dName">${item.dName }</td>
												<td class="td-price">${item.price }</td>
												<td class="td-sum">${item.num }</td>
												<td>${item.total }</td>
											</tr>
										</c:forEach>
										<tr>
											<td colspan="4"></td>
											<td>${order.total }</td>
										</tr>
									</table>
								</div>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			<!--container end-->
		</div>

	</div>
		<div id="sssModal0" class="modal fade" role="dialog"
		aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog" role="document">
			<div class="login-bg">
				<div class="contain">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">

							<div class="container-fluid"></div>
							<div class="module form-module">
								<div class="toggle">Complaints</div>
								<div class="form" id = "mark-div">
									<div>
										<h2>
											<img src="images/mark.png" width="5%" height="5%"> Mark
										</h2>
									</div>
										<div class="goods-comm">
											<div class="goods-comm-stars">
												<span class="star_l"><h5>Please give your grade
														for this ordering:</h5></span>
												<div id="rate-comm-1" class="rate-comm"></div>
											</div>
										</div>
								</div>
								<div class="form l_text" id = "complaints-div">
									<div>
										<h2>
											<img src="images/complain.png" width="8%" height="8%">
											Complaints
										</h2>
									</div>
									<label class="m_flo"></label>
										<input id="mark-oid" type="text" value="0"
											style="display: none" name="oid">
										<textarea name="complaints" form="complainform" class="text" id="complaints"></textarea>
										<input type="button" value="Submit" id="complain-submit">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--contain end-->

	<div class="footer"></div>
	<!--footer end-->

</body>
<script src='${pageContext.request.contextPath }/js/TweenMax.min.js'></script>
<script src="${pageContext.request.contextPath }/js/menu-script.js"></script>
<script type="text/javascript">
	$(".btn-detail").on("click", function() {
		var element = $(this).parent().parent().parent().find(".order");
		/* element.toggleClass("order-detail"); */
		if(element[0].style.display == "none" || element[0].style.display == ""){
			$(element).fadeIn(500);
		}else{
			$(element).fadeOut(500);
		}
	})
	
	// Toggle Function: CSS style control
		$('.toggle').click(function() {
			// Switches the Icon
			if (this.innerHTML == "Mark") {
				this.innerHTML = "Complaints";
			} else if (this.innerHTML == "Complaints") {
				this.innerHTML = "Mark";
			}

			// Switches the forms
			$('.form').animate({
				height : "toggle",
				'padding-top' : 'toggle',
				'padding-bottom' : 'toggle',
				opacity : "toggle"
			}, "slow");
		});
	
		onEvaluate = function onEvaluate(eva,oid){
			var starsHtml= "<div><h2>" + 
			"<img src='images/mark.png' width='5%' height='5%'> Mark</h2>" +
			"</div><div class='goods-comm'><div class='goods-comm-stars'>" +
			"<span class='star_l'><h5>Please give your grade for this ordering:</h5></span>" +
			"<div id='rate-comm-1' class='rate-comm'></div></div></div>";
			
			$('#mark-oid').val(oid);
			$('.goods-comm-stars').attr('id', oid);
			if(eva==0){
				$('#sssModal0').modal('toggle');
				
			}else if(eva==1){
				$('.toggle').remove();
				//$('#mark-div').html('');
				$('#sssModal0').modal('toggle');
				
			}else if(eva==2){
				$('.toggle').html('');
				$('.toggle').unbind('click');
				$('.toggle').removeClass('toggle');
				
				//$('#complaints-div').remove();
				$('#sssModal0').modal('toggle');
				//$('#mark-div').append()
			}
		}
</script>
</html>